<template>
	<view class="search">
		<musichead title="歌单" :icon="true" color="white" :iconBlack="true"></musichead>
		<view class="container">
			<scroll-view scroll-y="true">
				<view class="search-search" @tap="handleToSearch">
					<text class="iconfont iconsearch"></text>
					<input type="text" placeholder="搜索歌曲" v-model="searchWord" @confirm="handleToSearch(searchWord)" @input="handleToSuggest"/>
					<text class="iconfont iconguanbi" v-show="searchWord.length > 0" @tap="handleToClose"></text>
				</view>
				<block v-if="searchType == 1">
					<view class="search-history">
						<view class="search-history-head">
							<text>历史记录</text>
							<text class="iconfont iconlajitong" @tap="handleToClear"></text>
						</view>
						<view class="search-history-list">
							<view class="" v-for="(item, index) in searchHistory" :key="index" @tap="handleToWord(item)">{{ item }}</view>
						</view>
					</view>
					<view class="search-hot">
						<view class="search-hot-head">热搜榜</view>
						<view class="search-hot-item" v-for="(item, index) in searchHot" :key="index" @tap="handleToWord(item.searchWord)">
							<view class="search-hot-top">{{ index + 1 }}</view>
							<view class="search-hot-word">
								<view class="">
									{{ item.searchWord }}
									<image :src="item.iconUrl" mode=""></image>
								</view>
								<view class="">{{ item.content }}</view>
							</view>
							<text class="search-hot-count">{{ item.score }}</text>
						</view>
					</view>
				</block>
				<block v-else-if="searchType == 2">
					<view class="search-result">
						<view class="search-result-item" v-for="(item,index) in searchList" :key="index" @tap="handleToDetail(item.id)">
							<view class="search-result-word">
								<view class="">{{item.name}}</view>
								<view class="">{{item.ar[0].name}} - {{item.al.name}}</view>
							</view>
							<text class="iconfont iconbofang"></text>
						</view>
					</view>
				</block>
				<block v-else-if="searchType==3">
					<view class="search-suggest">
						<view class="search-suggest-head">
							搜索"{{searchWord}}"
						</view>
						<view class="search-suggest-item" v-for="(item,index) in searchSuggest" :key="index" @tap="handleToWord(item.keyword)">
							<text class="iconfont iconsearch" ></text>{{item.keyword}}
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import '@/common/iconfont.css';
import musichead from '@/components/controlled/musichead/musichead.vue';
import { searchHot, searchWord, searchSuggest } from '@/common/api.js';
export default {
	components: { musichead },
	data() {
		return {
			searchHot: [],
			searchWord: '',
			searchHistory: [],
			searchType: 1,
			searchList:[],
			searchSuggest:[]
		};
	},
	async onLoad() {
		const res = await searchHot();
		// console.log(res.data);
		if (res.data.code == 200) {
			this.searchHot = res.data.data;
		}
		uni.getStorage({
			key: 'searchHistory',
			success: res => {
				this.searchHistory = res.data;
			}
		});
	},
	methods: {
		handleToWord(word) {
			this.searchWord = word;
			this.handleToSearch(word)
		},
		handleToSearch(word) {
			if (word.type == 'click' || word.type == 'tap' || word.trim().length == 0) return;
			this.searchHistory.unshift(word);
			this.searchHistory = [...new Set(this.searchHistory)];
			if (this.searchHistory.length > 10) {
				this.searchHistory.length = 10;
			}
			uni.setStorage({
				key: 'searchHistory',
				data: this.searchHistory
			});
			this.getSearchList(word)
		},
		handleToClear() {
			uni.removeStorage({
				key: 'searchHistory',
				success: () => {
					this.searchHistory = [];
				}
			});
		},
		getSearchList(word){
			searchWord({word}).then(res=>{
				console.log(res.data.result);
				if(res.data.code==200){
					this.searchType=2;
					this.searchList=res.data.result.songs;
				}
			})
		},
		handleToClose(){
			this.searchWord = '';
			this.searchType=1;
		},
		handleToDetail(id){
			uni.navigateTo({
				url:'/pagesDetail/pages/detail/detail?songId='+id
			})
		},
		handleToSuggest(event){
			console.log(event.detail.value);
			let value=event.detail.value;
			if(!value){
				this.searchType=1;
				return;
			}
			searchSuggest({word:value}).then(res=>{
				if(res.data.code ==200){
					this.searchSuggest=res.data.result.allMatch;
					this.searchType=3;
				}
			})
		}
	}
};
</script>

<style lang="less" scoped>
.search {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	.search-search {
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 50rpx 30rpx;
		background: #f7f7f7;
		border-radius: 50rpx;
		text {
			font-size: 26rpx;
			margin-right: 26rpx;
			margin-left: 28rpx;
		}
		input {
			font-size: 28rpx;
			flex: 1;
		}
	}
	.search-history {
		margin: 0 30rpx 50rpx 30rpx;
		font-size: 26rpx;
		.search-history-head {
			display: flex;
			justify-content: space-between;
			margin-bottom: 36rpx;
		}
		.search-history-list {
			display: flex;
			flex-wrap: wrap;
			view {
				padding: 16rpx 28rpx;
				border-radius: 40rpx;
				margin-right: 30rpx;
				margin-bottom: 30rpx;
				background: #f7f7f7;
			}
		}
	}
	.search-hot {
		margin: 0 30rpx;
		font-size: 26rpx;
		.search-hot-head {
			margin-bottom: 36rpx;
		}
		.search-hot-item {
			display: flex;
			align-items: center;
			margin-bottom: 58rpx;
			.search-hot-top {
				color: #fb2222;
				width: 60rpx;
				margin-left: 8rpx;
			}
			.search-hot-word {
				flex: 1;
				image {
					width: 48rpx;
					height: 22rpx;
				}
				view {
					&:nth-of-type(1) {
						font-size: 30rpx;
						color: black;
					}
					&:nth-of-type(2) {
						font-size: 24rpx;
						color: #878787;
					}
				}
			}
			.search-hot-count {
				color: #878787;
			}
		}
	}
	.search-result {
		border-top: 2rpx solid #e4e4e4;
		padding: 30rpx;
		.search-result-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom:2rpx solid #e4e4e4;
			.search-result-word {
				view {
					&:nth-of-type(1) {
						font-size: 28rpx;
						color:#235790;
						margin-bottom:12rpx;
					}
					&:nth-of-type(2) {
						font-size: 22rpx;
						color:#898989;
					}
				}
			}
			text {
				font-size: 50rpx;
			}
		}
	}
	.search-suggest{
		border-top: 2rpx solid #e4e4e4;
		padding: 30rpx;
		font-size: 26rpx;
		.search-suggest-head{
			color:#4574a5;
			margin-bottom:74rpx;
		}
		.search-suggest-item{
			color:#5d5d5d;
			margin-bottom:74rpx;
			text{
				color:#bdbdbd;
				margin-right:28rpx;
				position:relative;
				top: 2rpx;
			}
		}
	}
}
</style>
